延續上一篇文章，今天來介紹動態路由，在瀏覽網頁的時候如果大家有注意，許多網頁在瀏覽上都會經由網址上傳遞參數後來決定頁面內顯示的內容，例如：

雖然頁面中顯示的產品不同，但都是經由同樣的頁面進行顯示，不同的是網址上傳遞的參數，類似的方法還有透過問號去帶出的參數。

一般來說這樣的開發方式有兩種，傳統的方式是：

上面的這種方法，並不是現代前、後端分離的開發方式，因為後端工作者也需要了解HTML的佈局，進而將資料放在他應該出現的位置，在工作分工上與開發時程上都不是最好的選擇，而我們之前文章所提框架也比較偏向應用在前後端分離的開發方式。

如上圖後端工程師可能完全不需要了解HTML的結構，只需要依照API回應對應的內容給前端即可，就是我們提到前、後端可以同時開工的工作方式，所以前面提到的動態路由就可以派上用場，記得前一篇文章我們有提到一頁是產品介紹頁面，接下來我們就來看看vue router動態路由的做法。

方法一 斜線形式

首先是route.js上面的修改，我們將product的path加上參數ID：

const routes = [{
        path: '/',
        component: Index,
    },
    {
        path: '/about',
        component: About,
    },
    {
        path: '/product/:id',
        component: Product,
    },
    {
        path: '/contact',
        component: Contact,
    },
];

接下來是App.js上面的連結，我們先寫死參數來測試接收的效果

<template>
  <h1>{{ "Please select the item you like below" }}</h1>
  <DropdownMenu :items="selectData.system"></DropdownMenu>
  <DropdownMenu :items="selectData.provider"></DropdownMenu>
  <div class="linkArea">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/product/a1023931">Product</router-link>
    <router-link to="/contact">Contact</router-link>
  </div>
  <router-view></router-view>
</template>

最後是在Product.vue檔案中，我們先試著將接受到的參數直接顯示在頁面上：

<template>
    <div>Product - {{ $route.params.id }}</div>
</template>

以下是執行結果

可以看到頁面中可以帶出網址上的參數，當然拿到參數後應該要打出API與後端索取頁面資料，也就是我們之前文章提到的axios這樣的方法，這邊就暫時先忽略了，大家可以參考之前的文章來進行。

方法二 問號形式

而攜帶參數的方式也可以變更使用問號來銜接，作法如下：

route.js修改成不加:id：

const routes = [{
        path: '/',
        component: Index,
    },
    {
        path: '/about',
        component: About,
    },
    {
        path: '/product',
        component: Product,
    },
    {
        path: '/contact',
        component: Contact,
    },
];

App.vue修改為下面的參數帶法：

<router-link :to="{path: '/product', query: { id: 'a1023931', category: '1' }}">Product</router-link>

Product.vue修改擷取參數的方式為：

<template>
  <div>Product - {{ $route.query }}</div>
</template>

在頁面上可以拿到的結果如下：

Product - { "id": "a1023931", "category": "1" }

因此我們可以透過$route.query.id拿到第一個參數，$route.query.category拿到第二個參數。

路由防護

我們可以在元件內（Product.vue）觸發路由的時候針對不同的時間點進行以下的動作：

<script>
export default {
  beforeRouteEnter(to, from) {
    // 在組件渲染前被呼叫，尚未能獲取組件的this，能拿到帶進路由的參數
    console.log("beforeRouteEnter");
    console.log("to: ", to);
    console.log("from: ", from);
    console.log("value: ", to.query.id);
    console.log("=====================");
  },
  beforeRouteUpdate(to, from) {
    // 在原組件路徑改變時被調用，可以獲取組件的this，能拿到帶進路由的參數
    console.log("beforeRouteUpdate");
    console.log("to: ", to);
    console.log("from: ", from);
    console.log("=====================");
  },
  beforeRouteLeave(to, from) {
    // 在離開組件時被調用，可以獲取組件的this
    console.log("beforeRouteLeave");
    console.log("to: ", to);
    console.log("from: ", from);
    console.log("=====================");
  },
};
</script>

• beforeRouteEnter：是第一次進入到該組件觸發路由時會進行的動作
• beforeRouteUpdate：在路由頁面為更換只是變更參數時會進行的動作
• beforeRouteLeave：離開路由頁面時會進行的動作

好啦！以上就是dynamic route大致上的用法，大家可以到vue-route的官網進行更深一層的研究。

範例檔